<template>
  <section class="vBox clearfix">
    <div
      id="drag"
      v-drag
      v-show="
        [
          '/query',
          '/',
          '/periodical',
          '/report',
          '/journalism',
          '/feeds',
          '/release',
        ].includes($route.path)
      "
    >
      <a href="/#/forum" title="论坛" target="_blank">打开论坛</a>
    </div>
    <div class="vBox_main">
      <router-view v-wechat-title="$route.meta.title" />
    </div>
    <div class="putOnRecord">
      <span
        class="cursor"
        @click="link('https://beian.miit.gov.cn/', 'quterChain')"
        >京ICP备2021031164号</span
      >
    </div>
  </section>
</template>

<script>
export default {
  name: "App",
  directives: {
    drag: {
      bind: function (el) {
        let oDiv = el;
        oDiv.onmousedown = (e) => {
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;
          document.onmousemove = (e) => {
            let left = e.clientX - disX;
            let top = e.clientY - disY;
            oDiv.style.left = left + "px";
            oDiv.style.top = top + "px";
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  methods: {
    // 跳转
    link(path, type) {
      if (type === "quterChain") {
        window.open(path, "_blank");
      } else {
        this.model = false;
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang="scss">
@import "assets/styles/base";
@import "assets/styles/variable";
@import "assets/styles/mixins";
@import "assets/styles/skin";

.vBox {
  .vBox_main {
    height: calc(100vh - 50px);
  }
  #drag {
    position: absolute;
    right: 100px;
    top: 50%;
    cursor: move;
    z-index: 2;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      height: 18px;
    }
  }
  .putOnRecord {
    background-color: $white;
    text-align: center;
    line-height: 50px;
    font-size: 12px;
  }
}
</style>
